<template>
  <div class="board-header">
    <div class="board-title">欣奕华企业看板</div>
    <div class="board-header-btn">
      <Space :size="20">
        <!-- <Icon.FullscreenOutlined class="__header-btn __btn1" /> -->
        <Icon.FullscreenOutlined
          v-if="isFull"
          title="退出全屏"
          class="__header-btn __btn2"
          @click="toFull"
        />
        <Icon.FullscreenOutlined v-else title="全屏" class="__header-btn __btn2" @click="toFull" />
      </Space>
    </div>
    <div class="board-header-time">
      <Space :size="20">
        <div>{{ date.date }}</div>
        <div>{{ date.time }}</div>
        <div>{{ date.day }}</div></Space
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onUnmounted, defineProps, onMounted } from 'vue';
  import * as Icon from '@ant-design/icons-vue';
  import { Space } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { string } from 'vue-types';

  const props = defineProps({
    fullDom: string,
  });
  let isFull = ref(false);
  const toFull = () => {
    if (isFull.value) {
      document.exitFullscreen();
    } else {
      document.querySelector(props.fullDom as any)?.requestFullscreen();
    }
  };
  const fullscreenchange = () => {
    if (document.fullscreenElement) {
      //全屏
      isFull.value = true;
    } else {
      // 非全屏
      isFull.value = false;
    }
  };
  const loading = ref(true);
  let nowDate = dayjs();
  const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  let date = reactive({
    date: `${nowDate.year()}年${nowDate.month()}月${nowDate.date()}日`,
    time: nowDate.format('HH:mm:ss'),
    day: weeks[nowDate.day()],
  });
  const timeInterVal = setInterval(() => {
    nowDate = dayjs();
    date.date = `${nowDate.year()}年${nowDate.month() + 1}月${nowDate.date()}日`;
    date.time = nowDate.format('HH:mm:ss');
    date.day = weeks[nowDate.day()];
  }, 1000);
  onMounted(() => {
    document.addEventListener('fullscreenchange', fullscreenchange);
  });
  onUnmounted(() => {
    clearInterval(timeInterVal);
  });
  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>

<style lang="less" scoped>
  .board-header {
    display: flex;
    position: relative;
    justify-content: center;
    height: 100px;

    .board-title {
      display: flex;
      align-items: center;
      height: 70px;
      padding: 0 100px;
      background: rgb(0 0 0 / 35%);
      color: #22eddc;
      font-size: 28px;
    }

    .board-header-btn {
      position: absolute;
      top: 16px;
      right: 10px;

      .__header-btn {
        font-size: 20px;
        cursor: pointer;
      }

      .__btn1 {
        color: #22eddc;
      }

      .__btn2 {
        color: #09f;
      }
    }

    .board-header-time {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 30px 0 20px;
      border-bottom: 2px solid rgb(93 173 205 / 100%);
      color: rgb(26 137 226);
      font-size: 18px;
    }
  }
</style>
